<script setup>
import {defineEmits, ref} from 'vue'
const emits =defineEmits('update:modelValue')
import {addUser} from '@/api/manager.js'
const handleClose = ()=>{
  emits('update:modelValue',false)
}
const handleConfirm = async ()=>{
  await addUser(form.value)
  handleClose()
}
const form = ref({
  username:"",
  password:"",
  role:"",
})
const formRef = ref(null)
const rules = {
    username: [
        {required: true, message: '用户名不能为空', trigger: 'blur'},
        // { min: 3, max: 5, message: '用户名长度为3到5个字符', trigger: 'blur' },
    ],
    password: [
        {required: true, message: '密码不能为空', trigger: 'blur'},
    ],
  role:[
      {required: true, message: '角色未选择 ', trigger: 'blur'},
  ]
}
</script>

<template>
<el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="30%"
    @close="handleClose"
  >
<el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
      <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" />
    </el-form-item>
      <el-form-item label="角色" prop="role">
      <el-select v-model="form.role" placeholder="角色">
        <el-option label="管理员" value="admin" />
        <el-option label="普通用户" value="user" />
      </el-select>
    </el-form-item>
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="handleConfirm">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>